<template>
    <div id="root">
        <img src="/imgs/home/title05.png" alt="">
        <p id="fifth-p">随着电商的爆炸式发展，行业人才缺口巨大；可胜任工作极多，电商成为了高逼格易进平台。</p>
        <div id="fifth">
            <div
                v-for="(d,i) in datum"
                :key="i"
                class="datum"
            >
                <span class="title">{{d.title}}</span>
                <img :src="d.path" alt="" class="fifth-img">
                <p class="content">{{d.content}}</p>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name:'',
    props:[''],
    data () {
        return {
            datum:[
                {   
                    title:'就业薪资高',
                    path:'/imgs/home/math01.png',
                    content:"平台显示电商行业薪资高达7516元，招聘人数将近200000人，电商行业急需大量专业人员。",
                },
                {   
                    title:'企业选择多',
                    path:'/imgs/home/math02.png',
                    content:"平台显示电商行业薪资高达7516元，招聘人数将近200000人，电商行业急需大量专业人员。",
                },
                {   
                    title:'职业路径广',
                    path:'/imgs/home/math03.png',
                    content:"平台显示电商行业薪资高达7516元，招聘人数将近200000人，电商行业急需大量专业人员。",
                },
                {   
                    title:'晋升速度快',
                    path:'/imgs/home/math04.png',
                    content:"平台显示电商行业薪资高达7516元，招聘人数将近200000人，电商行业急需大量专业人员。",
                },
            ],
        };
    },

  }

</script>
<style scoped>
#root{
    height: 1099px;
    text-align: center;
    padding: 124px;
    background-color: #E8E9ED;
}
#fifth-p{
    margin-top: 30px;
    margin-bottom: 109px;
    color: #484848;
    font-size: 20px;
}
#fifth{
    width: 1200px;
    height: 618px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.datum{
    width: 295px;
    height: 100%;
    color: #041F46;
    background-color: white;
    transition: all 0.3s;
}
.datum:hover{
    transform: translate(0,-40px);
    box-shadow: 0 0 10px 0 gray;
}
.title{
    font-size: 30px;
    font-weight:bold;
    display: inline-block;
    margin: 40px 0 23px 0;
}
.fifth-img{
    width: 100%;
    height: 285px;
    margin-bottom: 25px;
}
.content{
    text-align: left;
    font-size: 20px;
    padding: 0 44px 50px 31px;
    line-height: 36px;
}
</style>